<style lang="less" scoped>
        .parent{
            position: relative;
        }
        // .parent::after {  /*利用缩放和伪元素解决1px在不同手机有粗有细问题*/
        //     margin:auto auto;
        //     width:295px;
        //     position: absolute;
        //     bottom: 0;
        //     left: 0;
        //     right: 0;
        //     content: "";
        //     box-sizing: border-box;
        //     height: 1px;
        //     border-bottom: 1px solid #e8e8e8;
        //     transform: scaleY(0.5);
        //     transform-origin: 0 0;
        // }
        .animations {
            /* -webkit-animation: 'scaleDraw'  1s ease-in-out 0s 1 alternate forwards; 关键帧名称 */
            animation: 'scaleDraw' .6s ease-in-out 0s 1 alternate forwards;
        }
        .confirmBgc{
            position:fixed;
            top:0px;
            bottom:0px;
            left:0px;
            right:0px;
            overflow: auto;
            background-color: rgba(0,0,0,0.6);

            
        }
        .rytContainer_btn{
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0);
            border: none;
            text-align: left;
        }
        .rytContainer{
            // position:relative;
            // top:50%;
            // left:50%;
            // transform: translate(-50%,-50%);
            background:rgba(255,255,255,1);
            box-shadow:0px 0px 3rem 0px rgba(204,204,204,0.75);
            border-radius:1rem;
            margin: 0 auto;
            // margin-bottom: 2.5rem;
        }
        .rytTitle{
            font-size:2.4rem;
            font-family:Microsoft YaHei;
            font-weight:bold;
            
            line-height:7.6rem;
            text-align: center;
            border-bottom: 0.2rem solid rgba(227,227,227,1);
            span{
                border-bottom: 0.4rem solid rgba(58,174,255,1);
                padding-bottom: 2.2em;
                color:rgba(31,63,109,1);
            }
            i{
                top:0;
                right: 4rem;
                font-size: 2.8rem;
                color: #68676A;
            }
        }
        .rytContent{
            font-size: 1.6rem;
            color:#333;
            box-sizing: border-box;
            padding: 1.8rem 3rem 0 3rem;
        }
        .rytButtons{
            // width: 100%;
            // height:95px;
            color:#333;
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            padding: 3rem;
        }
        .rytisBtns{
            width: 100%;
            height:3rem;
            color:#333;
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            // padding: 3rem;
        }
        .button{
            height:3.5rem;
            border-radius:1rem;
            text-indent: center;
            line-height: 3.5rem;
            font-size:1.8rem;
            font-family:Microsoft YaHei;
            font-weight:400;
            text-align: center;
            margin-left: 2rem;
            padding: 0 2.2em;
        }
        .cancel{
            background:rgba(255,255,255,1);
            box-shadow:0px 0px 1.3rem 0px rgba(226,236,255,1);
            color:rgba(7,127,255,1);
        }
        .confirmStyle{
            background:linear-gradient(90deg,rgba(7,127,255,1),rgba(73,179,255,1));
            box-shadow:0px 0.5rem 1.3rem 0px rgba(7,127,255,0.2);
            color:rgba(255,255,255,1);
        }
        // .rytline{
        //     width:1px;
        //     height:4.2rem;
        //     background-color: #e8e8e8;
        //     /*以下代码是实现line线在x轴上的缩放，使线在不同手机上都显示的比较细*/
        //     transform: scaleX(0.5);
        //     transform-origin: 0 0;
        // }
</style>
<template>
    <div class="confirmBgc animations" :style="{zIndex:rytzIndex}" v-show="show">
        <button class="rytContainer_btn">
            <div class="rytContainer" :style="{width:rytWidth}">
                <h2 class="rytTitle relative" v-if="title"><span>{{title}}</span> <i @click="clickCancel" class="iconfont iconcha absolute"></i></h2>
                <div class="rytContent parent">
                    <slot name="content"></slot>
                </div>
                <div class="rytButtons" v-if="isBtn">
                    <div class="button cancel pointer" @click="clickCancel">{{cancel}}</div>
                    <!-- <div class="rytline"></div> -->
                    <div class="button confirmStyle pointer" @click="clickConfirm">{{confirm}}</div>
                    <div v-if="isGrid" class="button confirmStyle pointer" @click="clickConfirm1">{{newConfirm}}</div>
                </div>
                <div class="rytisBtns" v-else>
                </div>
            </div>
        </button>
    </div>
</template>

<!-- slot 插槽又叫内容分发 将父组件的内容放到子组件的指定位置就叫做内容分发 -->
<!-- <slot name="content"></slot>  此为插槽具名用法，在父父组件中只需要 <标签名 slot="content">内容部分</标签名> 即可-->
<script>
    export default {
        name:'modalConfirm',
        props:{
            rytzIndex:{
                type:String,
                default:'990'
            },//层级
            rytWidth:{
                type:String,
                default:'30rem'
            },//弹窗宽
            title:{
                type:[String,Boolean],
                default:'rrr'
            },//标题
            cancel:{
                type:[String],
                default:'取消'
            },//取消按钮
            confirm:{
                type:[String],
                default:'确定'
            },//确定按钮
            showModalconfirm:{
                type:Boolean,
                default:false
            },//显示
            isBtn:{
                type:Boolean,
                default:true
            },//是否显示按钮
            isGrid:{
                type:Boolean,
                default:false
            },//是否显示新增按钮
            newConfirm:{
                type:[String],
                default:'网格员核查'
            },//新增按钮
        },
        data(){
            return{
                show:false,
            }
        },
        methods:{
            //关闭弹窗
            clickCancel(){
                this.show = false
            },
            //点击确定事件
            clickConfirm(){
                // this.show = false
                this.$emit('oncilckConfirm')
            },
            //点击确定事件
            clickConfirm1(){
                // this.show = false
                this.$emit('oncilckConfirm1')
            },
            //点击确定事件后关闭弹窗
            isshow(){
                this.show = false
            }
        },
        watch:{
            showModalconfirm(val){
                this.show = val
            },
            show(val){  //监听show的值，当show的值发生改变的时候val即为当前show的值，把该值传给父组件的v-model属性（v-model绑定的是input事件，出发Input事件）
                this.$emit('input',val)
            }
        }
    }
</script>

